<template>
  <div>
    <section>
      <h5>来,说说你在做什么,想什么</h5>
      <input type="text" v-model="mingzi" placeholder="输入你的网名" />
      <textarea @input="shuru" v-model="neirong" maxlength="136"></textarea>
      <p class="liuyan">
        <span v-model="keyi">还可以输入{{ keyi }}个字</span
        ><button class="guangbo" @click="fabu">广播</button>
      </p>
      <div v-for="(i, item) in arrnew" :key="item" class="zhaopian">
        <span
          ><img
            v-bind:src="i"
            alt=""
            @click="wo(item)"
            :class="{ pai: item == atmitem }"
        /></span>
      </div>
      <ul v-for="(i, item) in arr" :key="item">
        <li class="shougong">
          <img v-bind:src="i.imgs" />
          <span>{{ i.name }}: </span>
          <b>{{ i.title }}</b>
          <i>{{ time | formatDate }}</i>
        </li>
      </ul>
    </section>
  </div>
</template>
<script>
export default {
  data() {
    return {
      time: "",
      keyi: 136,
      neirong: "",
      arr: [],
      mingzi: "",
      imgS: "/static/img/QQ图片20210408152926.4382d23.png",
      atmitem: "",
      arrnew: [
        require("./img/QQ图片20210408152926.png"),
        require("./img/QQ图片20210408152848.gif"),
        require("./img/QQ图片20210520113810.jpg"),
      ],
    };
  },
  methods: {
    shuru() {
      this.keyi = 136 - this.neirong.length;
    },
    fabu() {
      this.arr.push({
        name: this.mingzi,
        title: this.neirong,
        shijian: this.time,
        imgs: this.imgS,
      });
      (this.mingzi = ""), (this.neirong = "");
    },
    wo(item) {
      this.atmitem = item;
      this.imgS = this.arrnew[item];
    },
  },
  filters: {
    formatDate: function () {
      var date = new Date();
      var yue = date.getMonth() + 1;
      yue = yue < 10 ? "0" + yue : yue;
      var hao = date.getDate();
      hao = hao < 10 ? "0" + hao : hao;
      var shi = date.getHours();
      shi = shi < 10 ? "0" + shi : shi;
      var fen = date.getMinutes();
      fen = fen < 10 ? "0" + fen : fen;
      return yue + "月" + hao + "日" + "   " + shi + ":" + fen;
    },
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
h5 {
  font-size: 20px;
  color: #333;
}
li {
  list-style: none;
}
input {
  outline: none;
}
textarea {
  outline: none;
  resize: none;
  width: 600px;
  height: 200px;
  display: block;
  margin-top: 20px;
}
section {
  padding-left: 20px;
}
.liuyan {
  padding-left: 350px;
  padding-top: 20px;
}
.guangbo {
  width: 150px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  outline: none;
  border: none;
  background: green;
}
i,
b {
  font-style: normal;
  font-weight: 400;
}
.zhaopian img {
  width: 50px;
  height: 50px;
  float: left;
  opacity: 0.5;
}
.pai {
  opacity: 1 !important;
}
.shougong img {
  width: 100px;
  height: 100px;
}
</style>